<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="category-body main-section top" :style="'height:'+height+'px'">
			<scroll-view class="nav-left" scroll-y="true" :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
				<view class="nav-left-item text-ellipsis" @click="categoryClickMain(0)" :key="index" :class="0==categoryActive?'active':''">
					推荐
				</view>
				<view class="nav-left-item text-ellipsis" @click="categoryClickMain(item.id)" :key="index" :class="item.id==categoryActive?'active':''"
					v-for="(item,index) in tree">
					{{item.title}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation>
				<!--子分类容器-->
				<view v-for="(child,index) in tree" :key="index" class="child-item" :class="child.id==categoryActive?'active':''">
					<view class="list">
						<view class="nav-right-item" :class="categoryId == categoryActive?'active':''" @click="categoryClickChild(categoryActive)">
							<image :src="child.cover_100" />
							<view>全部</view>
						</view>
						<view class="nav-right-item" :class="categoryId == item.id?'active':''" v-for="(item,i) in child._child" :key="i" @click="categoryClickChild(item.id)">
							<image :src="item.cover_100" />
							<view class="text-ellipsis">{{item.title}}</view>
						</view>
					</view>
				</view>
				<!--商品列表容器-->
				<view class="list-section">
					<view class="item" v-if="knowledgeListParams.list!=undefined && knowledgeListParams.list.length > 0 && knowledgeListParamsLoaded">
						<KnowledgeList ref="knowledgeList" title="课程列表组件" type="knowledge_list" :params="knowledgeListParams" :config="config" />
					</view>
					<view v-if="columnListParams.list!=undefined && columnListParams.list.length > 0 && columnListParamsLoaded">
						<ColumnList ref="columnList" title="专栏列表组件" type="column_list" :params="columnListParams" :config="config" />
					</view>
					<view v-if="liveListParams.list!=undefined && liveListParams.list.length > 0 && liveListParamsLoaded">
						<LiveList ref="liveList" title="直播课堂列表组件" type="live_list" :params="liveListParams" :config="config" />
					</view>
					<view v-if="offlineListParams.list!=undefined && offlineListParams.list.length > 0 && offlineListParamsLoaded">
						<OfflineList ref="offlineList" title="线下课列表组件" type="offline_list" :params="offlineListParams" :config="config" />
					</view>
					<view v-if="materialListParams.list!=undefined && materialListParams.list.length > 0 && materialListParamsLoaded">
						<MaterialList ref="materialList" title="资料下载列表组件" type="material_list" :params="materialListParams" :config="config" />
					</view>
					<view v-if="exampaperListParams.list!=undefined && exampaperListParams.list.length > 0 && exampaperListParamsLoaded">
						<ExamPaperList ref="exampaperList" title="题库试卷列表组件" type="exam_paper_list" :params="exampaperListParams" :config="config" />
					</view>
					<view class="load-more-box" v-if="listLoadStatus == 'loading'">
						<uni-load-more iconType="circle" :status="listLoadStatus" />
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	//全屏加载中
	import FullscreenLoading from '@/components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	import ColumnList from '@/common/diys/ColumnList/ColumnList.vue' //专栏列表组件
	import KnowledgeList from '@/common/diys/KnowledgeList/KnowledgeList.vue' //课程列表组件
	import LiveList from '@/common/diys/LiveList/LiveList.vue' //直播课堂列表组件
	import MaterialList from '@/common/diys/MaterialList/MaterialList.vue' //资料下载列表组件
	import OfflineList from '@/common/diys/OfflineList/OfflineList.vue' //线下课列表组件
	import ExamPaperList from '@/common/diys/ExamPaperList/ExamPaperList.vue' //题库试卷列表组件
	
	export default {
		components: {
			FullscreenLoading,
			ColumnList,
			KnowledgeList,
			LiveList,
			MaterialList,
			OfflineList,
			ExamPaperList,
		},
		data() {
			return {
				loading: true, // 数据是否加载完成
				tree: {},
				height: 0,
				categoryActive: 0,
				categoryId: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				scrollHeight: 0,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight: 0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				knowledgeListParamsLoaded: false,
				knowledgeListParams: {}, //点播课列表
				columnListParamsLoaded: false,
				columnListParams: {}, //专栏列表
				liveListParamsLoaded: false,
				liveListParams: {}, //直播列表
				offlineListParamsLoaded: false,
				offlineListParams: {}, //线下课列表
				materialListParamsLoaded: false,
				materialListParams: {}, //资料列表
				exampaperListParamsLoaded: false,
				exampaperListParams: {}, //题库试卷列表
				listLoadStatus: 'loading', // more 加载前 loading 加载中 noMore没有更多
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		    //console.log(option); //打印出上个页面传递的参数。
			this.urlParams = option
			this.setDefaultCategoryActive()
		},

		created() {
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight;
			//#ifdef H5
			this.height = this.height - 43
			//#endif
			this.getCategoryTree()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
			/**
			 * 获取分类数据
			 */
			getCategoryTree: function(){
				let that = this
				//获取分类数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/category'
					//#endif
					//#ifdef H5
					url = 'entry/site/category'
					//#endif
				this.util.request({
					url : url,
					data : {
						'm': 'muu_classroom'
					},
					success: function (res) {
						if (res.data.code == 200) {
							that.tree = res.data.data
							//console.log(res.data.data)
							that.$nextTick(()=>{
							 	that.getHeightList();
							})
							that.loading = false
						}
					}
				})
			},
			getHeightList: function(){
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this)
				//console.log(selectorQuery)
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					//console.log(JSON.stringify(rects))
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * _this.tree.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
						})
						//console.log(arr)
						_this.arr = arr
					}).exec()
			},
			
			setDefaultCategoryActive: function(){
				if(this.urlParams.id == undefined){
					this.categoryActive = 0
					this.categoryId = 0
					this.getKnowledgeList()
					this.getColumnList()
					this.getLiveList()
					this.getOfflineList()
					this.getMaterialList()
					this.getExamPaperList()
				}else{
					this.categoryActive = this.urlParams.id
					this.categoryId = this.urlParams.id
					if(this.urlParams.cid > 0){
						this.categoryClickChild(this.urlParams.cid)
					}else{
						this.getKnowledgeList()
						this.getColumnList()
						this.getLiveList()
						this.getOfflineList()
						this.getMaterialList()
						this.getExamPaperList()
					}
				}
			},
			categoryClickMain: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				this.categoryActive = id;
				this.scrollTop == this.arr[id] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[id]//防止两次相等造成点击不触发滚动时间
				let promise = new Promise(function(resolve, reject){
				    //console.log(id);
					that.categoryId = id;
				    resolve()
				});
				promise.then(function(){
					that.getKnowledgeList()
					that.getColumnList()
					that.getLiveList()
					that.getOfflineList()
					that.getMaterialList()
					that.getExamPaperList()
				})
				
			},
			categoryClickChild: function(id) {
				let that = this
				this.listLoadStatus = 'loading'
				let promise = new Promise(function(resolve, reject){
				    //console.log(id);
					that.categoryId = id;
				    resolve()
				});
				promise.then(function(){
					that.getKnowledgeList()
					that.getColumnList()
					that.getLiveList()
					that.getOfflineList()
					that.getMaterialList()
					that.getExamPaperList()
				})
			},
			
			/**
			 * 列表加载状态
			 */
			setListLoadStatus: function(){
				let that = this
				if(that.knowledgeListParamsLoaded == true
				 && that.columnListParamsLoaded == true 
				 && that.liveListParamsLoaded == true 
				 && that.offlineListParamsLoaded == true 
				 && that.materialListParamsLoaded == true
				 && that.exampaperListParamsLoaded == true){
					that.listLoadStatus = 'end'
				}else{
					that.listLoadStatus = 'loading'
				}
				
				
			},
			
			/**
			 * 获取点播课列表
			 */
			getKnowledgeList: function(){
				let that = this
				that.knowledgeListParams = {}
				that.knowledgeListParamsLoaded = false
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
					
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/knowledge'
					//#endif
					//#ifdef H5
					url = 'entry/site/knowledge'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.knowledgeListParams.title = '课程'
							that.knowledgeListParams.rows = res.data.data.per_page
							that.knowledgeListParams.category_id = that.categoryId
							that.knowledgeListParams.list = res.data.data.data
							that.knowledgeListParams.style = 0
							//that.$refs.knowledgeList.updatePropParams(that.knowledgeListParams);
						}
						that.knowledgeListParamsLoaded = true
						that.setListLoadStatus()
					}
				})
			},
			
			/**
			 * 获取专栏列表
			 */
			getColumnList: function(){
				let that = this
				that.columnListParams = {}
				that.columnListParamsLoaded = false
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/column'
					//#endif
					//#ifdef H5
					url = 'entry/site/column'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.columnListParams.title = '专栏'
							that.columnListParams.rows = res.data.data.per_page
							that.columnListParams.category_id = that.categoryId
							that.columnListParams.list = res.data.data.data
							that.columnListParams.style = 0
							//console.log(that.columnListParams)
						}
						that.columnListParamsLoaded = true
						that.setListLoadStatus()
					}
				})
			},
			
			/**
			 * 获取直播列表
			 */
			getLiveList: function(){
				let that = this
				that.liveListParams = {}
				that.liveListParamsLoaded = false
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/livecourse'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/live'
					data.m = 'muu_classroom_plugin_livecourse'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.liveListParams.title = '直播'
							that.liveListParams.rows = res.data.data.per_page
							that.liveListParams.category_id = that.categoryId
							that.liveListParams.list = res.data.data.data
							that.liveListParams.style = 0
						}
						that.liveListParamsLoaded = true
						that.setListLoadStatus()
					}
				})
			},
			
			/**
			 * 获取线下课列表
			 */
			getOfflineList: function(){
				let that = this
				that.offlineListParams = {}
				that.offlineListParamsLoaded = false
				let data = {}
					data.action = 'lists'
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
				//获取数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/offline'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/offline'
					data.m = 'muu_classroom_plugin_offline'
					//#endif
				//获取数据
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.offlineListParams.title = '线下课'
							that.offlineListParams.rows = res.data.data.per_page
							that.offlineListParams.category_id = that.categoryId
							that.offlineListParams.list = res.data.data.data
							that.offlineListParams.style = 0
							
						}
						that.offlineListParamsLoaded = true
						that.setListLoadStatus()
					}
				})
			},
			
			/**
			 * 获取资料下载列表
			 */
			getMaterialList: function(){
				let that = this
				that.materialListParams = {}
				that.materialListParamsLoaded = false
				let data = {}
					data.action = 'lists'
					data.m = 'muu_classroom'
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/material'
					data.m = 'muu_classroom'
					//#endif
					//#ifdef H5
					url = 'entry/site/material'
					data.m = 'muu_classroom_plugin_material'
					//#endif
				//获取首页数据
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.materialListParams.title = '资料'
							that.materialListParams.rows = res.data.data.per_page
							that.materialListParams.category_id = that.categoryId
							that.materialListParams.list = res.data.data.data
							that.materialListParams.style = 0
							
						}
						that.materialListParamsLoaded = true
						that.setListLoadStatus()
					}
				})
			},
			
			/**
			 * 获取资料下载列表
			 */
			getExamPaperList: function(){
				let that = this
				that.exampaperListParams = {}
				that.exampaperListParamsLoaded = false
				let data = {}
					data.page = 1
					data.rows = 4
					data.category_id = this.categoryId
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/exam'
					data.m = 'muu_classroom'
					data.action = 'lists'
					//#endif
					//#ifdef H5
					url = 'entry/site/paper'
					data.m = 'muu_classroom_plugin_exam'
					//#endif
				//获取首页数据
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							that.exampaperListParams.title = '试卷'
							that.exampaperListParams.rows = res.data.data.per_page
							that.exampaperListParams.category_id = that.categoryId
							that.exampaperListParams.list = res.data.data.data
							that.exampaperListParams.style = 0
						}
						that.exampaperListParamsLoaded = true
						that.setListLoadStatus()
						//console.log(that.exampaperListParams)
					}
				})
			},

		}
	}
</script>

<style lang="scss">
.category-body {
	display: flex;
	background: #fff;
	overflow: hidden;
}

.nav-left {
	width: 23%;
	background: #ffffff;
	.nav-left-item {
		height: 96rpx;
		font-size: 28rpx;
		text-align: center;
		line-height: 96rpx;
		color: #666;
		&:last-child{
			border-bottom: none;
		}
	}
	.nav-left-item.active {
		color: $Blue;
		background: #f2f2f2;
		border-right: 0;
	}
}


.nav-right {
	width: 77%;
	background-color: #f2f2f2;
	padding: 0 20rpx;
	.child-item {
		display: none;
		overflow: hidden;
		border-bottom: 20rpx solid #f2f2f2;
		background-color: #ffffff;
		.title {
			font-size: 28rpx;
			font-weight: 500;
			padding: 40rpx 0;
			background-color: #f2f2f2;
		}
		.list {
			display: block;
			.nav-right-item {
				width: 25%;
				height: 180rpx;
				float: left;
				text-align: center;
				padding: 20rpx;
				font-size: 28rpx;
				color: #666;
				image {
					width: 120rpx;
					height: 120rpx;
				}
			}
			.nav-right-item.active {
				color: $Blue;
				font-weight: 600;
			}
		}
	}
	.child-item.active {
		display: block;
	}
	.list-section {
		background-color: #fff;
	}
}



::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
   width: 0;
   height: 0;
   color: transparent;
}
</style>
